<template>
  <div class="cart-btn">
    <add-value :isShow="isShow" :id="id" :number="number" />
    <ul class="clearfix">
      <li>
        <div class="btnItem transition"><span @click="isShow = true">立即购买</span></div>
      </li>
      <li>
        <div class="btnItem into-cart transition" @click="addShopCart">
          <img src="~/assets/images/whitecart.png" alt="" class="icon" />
          <span>加入购物车</span>
        </div>
      </li>
      <li>
        <div class="btnItem ask-price transition" @click="goInquiry"><span>发起询价</span></div>
      </li>
    </ul>
  </div>
</template>

<script>
import AddValue from 'components/common/AddValue';
import { addCart } from '@/request/api';

export default {
  props: {
    id: '',
    number: '',
    mid: ''
  },
  components: {
    AddValue
  },
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    goInquiry() {
      this.$router.push({
        name: 'CateInquiry',
        query: { mid: this.mid, proId: this.id }
      });
    },
    /**
     * 加入购物车
     * cart_num 数量
     * is_new 是否最新
     * product_id 产品id
     * product_type 产品类型
     */
    addShopCart() {
      if (this.number < 0) {
        this.$toastVant('请输入正确的数量');
      }
      let that = this;
      let data = {
        cart_num: that.number,
        is_new: 0,
        product_id: that.id,
        product_type: 0
      };
      addCart(data)
        .then(res => {
          if (res.status === 200) {
            this.$toastVant.success('加入成功！');
          }
        })
        .catch(err => {
          this.$toastVant(err.message);
        });
    },
    // 取消
    toCate() {
      this.isShow = true;
    }
  }
};
</script>

<style scoped>
.cart-btn {
  position: absolute;
  width: 600px;
}

.cart-btn .btnItem {
  display: inline-block;
  padding: 12px 20px;
  line-height: 20px;
  color: #fff;
  background: rgb(227, 139, 43);
  border-radius: 10px;
  margin-right: 14px;
  cursor: pointer;
}

.cart-btn li {
  float: left;
  font-size: 14px;
}

.cart-btn .btnItem:hover {
  opacity: 0.8;
}

.into-cart .icon {
  width: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

.cart-btn .ask-price {
  color: #e38b2b;
  background: #fff;
  border: 1px solid rgb(227, 139, 43);
}
</style>
